<template>
  <div class="left">
    <div class="tag">管理后台</div>
    <router-link class="link" to="/home/dashboard" key="/dashboard">
      <svg-icon iconname="#icon-info"></svg-icon>
      看板
    </router-link>
    <router-link class="link" to="/home/list" key="/list">
      <svg-icon iconname="#icon-star"></svg-icon>
      便签
    </router-link>
    <router-link class="link" to="/home/base" key="/base">
      <svg-icon iconname="#icon-phone"></svg-icon>
      标签
    </router-link>
    <router-link class="link" to="/home/table" key="/table">
      <svg-icon iconname="#icon-touxiang"></svg-icon>
      表格
    </router-link>
    <router-link class="link" to="/home/center" key="/center">
      <svg-icon iconname="#icon-yinhang-zhongguoyinhang"></svg-icon>
      居中
    </router-link>
    <router-link class="link" to="/home/copy" key="/copy">
      <svg-icon iconname="#icon-yinhang-nonghang"></svg-icon>
      深浅拷贝
    </router-link>
    <router-link class="link" to="/home/debu" key="/debu">
      <svg-icon iconname="#icon-yinhang-zhada"></svg-icon>
      <div>节流防抖</div>
    </router-link>
    <router-link class="link" to="/home/js" key="/js">
      <svg-icon iconname="#icon-yinhang-zhada"></svg-icon>
      <div>js基础</div>
    </router-link>
    <!-- <router-link
      class="link"
      custom
      v-slot="{ navigate }"
      :to="{ name: '/home/me' }"
      key="/home/me"
    >
      <span @click="navigate">单组件</span>
    </router-link> -->
  </div>
</template>

<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon.vue'
</script>

<style scoped>
.tag {
  text-align: center;
  width: 100%;
  height: 80px;
  line-height: 80px;
  font-weight: bold;
  color: white;
  background-color: rgba(0, 0, 0, 0.8);
}

.left {
  display: flex;
  flex-direction: column;
  flex: 2;
  background-color: rgba(0, 0, 0, 0.05);
}
</style>
